<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="Template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core">

    
    <ui:define name="conteudo">

        <h:form>  

            <p:growl id="growl" sticky="true" showDetail="true"/>  

            <p:wizard widgetVar="wiz"  
                      flowListener="#{usuarioWizard.onFlowProcess}">  

                <p:tab id="tipo" title="Tipo do Cliente">  

                    <p:panel header="Tipo do Cliente">  

                        <p:messages closable="true" />   

                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">  
                             <h:outputText value="Tipo: " />  
                              <p:selectOneRadio id="options" value="#{usuarioWizard.number}">  
                                  <f:selectItem itemLabel="Cliente Pessoa Física" itemValue="1" />  
                                  <f:selectItem itemLabel="Cliente Pessoa Juridica" itemValue="2" />  
                              </p:selectOneRadio>  
                        </h:panelGrid>  
                    </p:panel>  
                </p:tab>  
                
                <p:tab id="personal" title="Dados Pessoais">  

                    <p:panel header="Detalhes do cliente">  

                        <p:messages closable="true" />   

                        <h:panelGrid columns="2" columnClasses="label, value" rendered="#{usuarioWizard.number == 1}" styleClass="grid">  
                            <h:outputText value="Nome: *" />  
                            <p:inputText required="true" label="Nome"  requiredMessage="Campo 'Nome' de preenchimento obrigátorio."  
                                         value="#{usuarioWizard.user.firstname}" />  

                            <h:outputText value="Sobrenome: *" />  
                            <p:inputText required="true" label="Sobrenome"  requiredMessage="Campo 'Sobrenome' de preenchimento obrigátorio."  
                                         value="#{usuarioWizard.user.lastname}" />  

                            <h:outputText value="Idade: " />  
                            <p:inputText value="#{usuarioWizard.user.age}" />  

                            <h:outputText value="Finalizar: " />  
                            <p:selectBooleanCheckbox value="#{usuarioWizard.skip}"></p:selectBooleanCheckbox>  

                        </h:panelGrid>  
                        
                        <h:panelGrid columns="2" columnClasses="label, value"  rendered="#{usuarioWizard.number == 2}"  styleClass="grid">  
                            <h:outputText value="Empresa: *" />  
                            <p:inputText required="true" label="Nome" requiredMessage="Campo 'Nome' de preenchimento obrigátorio."  
                                         value="#{usuarioWizard.user.firstname}" />  

                            <h:outputText value="Nome Fantasia: *" />  
                            <p:inputText required="true" label="Sobrenome"  requiredMessage="Campo 'Sobrenome' de preenchimento obrigátorio."  
                                         value="#{usuarioWizard.user.lastname}" />  

                            <h:outputText value="CNPJ: " />  
                            <p:inputText value="#{usuarioWizard.user.age}" />  

                            <h:outputText value="Finalizar: " />  
                            <p:selectBooleanCheckbox value="#{usuarioWizard.skip}"></p:selectBooleanCheckbox>  

                        </h:panelGrid>  
                    </p:panel>  
                </p:tab>  

                <p:tab id="address" title="Endereço">  
                    <p:panel header="Detalhes do enredeço">  

                       <p:messages closable="true" />     

                        <h:panelGrid columns="2" columnClasses="label, value">  
                            <h:outputText value="Endereço: " />  
                            <p:inputText value="#{usuarioWizard.user.street}" />  

                            <h:outputText value="CEP: " />  
                            <p:inputText value="#{usuarioWizard.user.postalCode}" />  

                            <h:outputText value="Cidade: " />  
                            <p:inputText value="#{usuarioWizard.user.city}" />  

                            <h:outputText value="Finalizar: " />  
                            <p:selectBooleanCheckbox value="#{usuarioWizard.skip}"></p:selectBooleanCheckbox> 
                        </h:panelGrid>  
                    </p:panel>  
                </p:tab>  

                <p:tab id="contact" title="Contato">  
                    <p:panel header="INformação para Contato">  

                       <p:messages closable="true" />   

                        <h:panelGrid columns="2" columnClasses="label, value">  
                            <h:outputText value="Email: *" />  
                            <p:inputText required="true" label="Email"  
                                         value="#{usuarioWizard.user.email}" />  

                            <h:outputText value="Telefone: " />  
                            <p:inputText value="#{usuarioWizard.user.phone}"/>  

                            <h:outputText value="Informação Adcional: " />  
                            <p:inputText value="#{usuarioWizard.user.info}"/>  
                        </h:panelGrid>  
                    </p:panel>  
                </p:tab>  

                <p:tab id="confirm" title="Confirmação">  
                    <p:panel header="Dados de Confirmação">  

                        <h:panelGrid id="confirmation" columns="6">  
                            <h:outputText value="Nome: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.firstname}" />  

                            <h:outputText value="Sobrenome: " />  
                            <h:outputText  styleClass="outputLabel"  
                                           value="#{usuarioWizard.user.lastname}"/>  

                            <h:outputText value="Idade: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.age}" />  

                            <h:outputText value="Endereço: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.street}" />  

                            <h:outputText value="CEP: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.postalCode}" />  

                            <h:outputText value="Cidade: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.city}" />  

                            <h:outputText value="Email: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.email}" />  

                            <h:outputText value="Telefone: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.phone}"/>  

                            <h:outputText value="Info: " />  
                            <h:outputText styleClass="outputLabel"  
                                          value="#{usuarioWizard.user.info}" />  

                            <h:outputText />  
                            <h:outputText />  
                        </h:panelGrid>  

                        <p:commandButton value="Cadastrar" update="growl"   
                                         actionListener="#{usuarioWizard.save}"/>  

                    </p:panel>  
                </p:tab>  

            </p:wizard>  

        </h:form>  

    </ui:define>

</ui:composition>
